<template>
  <div class="detailPageCss">
    <div class="titleCss">查看人员剂量检测报告</div>
    <div class="bodyCss">
      <div class="tableCss">
        <el-table
          v-loading="loading"
          max-height="640"
          :data="tableData"
          border
          style="width: 100%"
        >
          <el-table-column
            prop="detectionTime"
            label="检测时间"
            min-width="100"
          >
          </el-table-column>
          <el-table-column
            prop="detectionResult"
            label="检测结果"
            min-width="150"
          >
            <!-- <template #default="scope">
              {{ data2Map[scope.row.detectionResult] }}
            </template> -->
          </el-table-column>
          <el-table-column
            prop="detectionReport"
            label="检测报告"
            min-width="150"
          >
            <template #default="scope">
              <el-button @click="exportStaffInfo(scope.row)" type="text">{{ scope.row.detectionReport }}</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          style="margin-top:10px;text-align: right;"
          background
          :pageSize="pageSize"
          layout="prev, pager, next"
          :page-sizes="[10, 20, 50]"
          :total="total"
          @sizeChange="handleSizeChange"
          @currentChange="handleCurrentChange"
        >
        </el-pagination>
      </div>
    </div>
    <div class="bottomBtnCss">
      <el-button @click="goBackBtn">返回</el-button>
    </div>
  </div>
</template>

<script>
import { exportStaffInfo, getDoseList } from '@/api/zhangping/personDetail'
import { getCurrentDay } from '@/utils/business.js'

export default {
  data() {
    return {
      loading: false,
      tableData: [],
      pageSize: 10,
      total: 10,
      data2Map: {
        0: '合格',
        1: '不合格'
      }
    }
  },
  mounted() {
    console.log(this.$route.query.id)
    this.getList()
  },
  methods: {
    exportStaffInfo(row) {
      console.log(process.env.VUE_APP_BASE_API)
      let url = 'http://36.137.225.215:7799/prod-api' + row.detectionReport
      window.open(url)
      // exportStaffInfo({saffId:row.id}).then(res=>{
      //   if (res.code===200) {
      //     const blob = new Blob([res.data], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
      //     const link = document.createElement('a');
      //     link.href = URL.createObjectURL(blob);
      //     link.download = `人员剂量检测报告-${getCurrentDay()}.xlsx`;
      //     link.click();
      //     URL.revokeObjectURL(link.href);
      //   }
      // })
    },
    lookDetailBtn(row) {
      const obj = {
        path: '/healthCare/zpMedicalOrg/checkSelf/detail',
        query: {
          id: '111'
        }
      }
      this.$router.push(obj)
    },
    getList() {
      this.loading = true
      getDoseList({
        radiationEnterpriseStaffId: this.$route.query.info.id,//测试数据
        pageNum: 1,
        pageSize: 10
      }).then(res => {
        this.loading = false
        if (res.code === 200) {
          this.tableData = res.rows
          this.total = res.total
        }
      })
    },
    handleCurrentChange() {

    },
    handleSizeChange() {

    },
    resetBtn() {

    },
    searchBtn() {

    },
    goBackBtn() {
      this.$router.back()
    }
  }
}
</script>

<style lang="scss" scoped>
.detailPageCss {
  overflow: hidden;
  position: relative;
  background-color: #fff;
  padding: 20px;
  border-radius: 10px;
  height: calc(100vh - 66px - 40px);
  display: flex;
  flex-direction: column;

  .titleCss {
    text-align: center;
    font-size: 18px;
    font-weight: bold;
  }

  .bodyCss {
    margin-top: 20px;
    width: calc(100% - 20px);
    margin-left: 10px;
    height: calc(100% - 90px);
    overflow-y: auto;

    .el-form {
      display: flex;
      flex-wrap: wrap;
      border-bottom: 1px solid #f2f2f2;

      .formBtnCss {
        margin-left: 20px;
        text-align: center;
      }
    }
  }

  .bottomBtnCss {
    margin-top: auto;
    text-align: right;
  }
}

::v-deep .el-form-item__content {
  width: 200px;
}
</style>
